<template>
  <div class="bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 p-6">
    <h3 class="text-lg font-semibold text-gray-900 mb-4">实时预览</h3>
    
    <!-- 角色卡片预览 -->
    <div class="bg-gray-50 rounded-xl p-4">
      <!-- 头像 -->
      <div class="flex justify-center mb-4">
        <div 
          class="w-16 h-16 rounded-full overflow-hidden bg-gray-200 flex items-center justify-center cursor-pointer hover:ring-2 hover:ring-[#635BFF] hover:ring-opacity-50 transition-all duration-200"
          @click="showAvatarPreview"
        >
          <img 
            v-if="form.avatar" 
            :src="form.avatar" 
            alt="角色头像" 
            class="w-full h-full object-cover"
          />
          <svg v-else class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
          </svg>
        </div>
      </div>
      
      <!-- 角色名称 -->
      <div class="text-center mb-4">
        <div class="text-lg font-semibold text-gray-900">
          {{ form.name || '角色名称' }}
        </div>
      </div>
      
      <!-- 角色设定 -->
      <div class="mb-4">
        <div class="text-sm font-medium text-gray-700 mb-2">角色设定</div>
        <div class="bg-white rounded-lg p-3 min-h-[60px]">
          <div 
            class="text-sm text-gray-600 line-clamp-2 cursor-help"
            :title="form.prompt || '这里将显示角色的详细设定信息...'"
          >
            {{ form.prompt || '这里将显示角色的详细设定信息...' }}
          </div>
        </div>
      </div>
      
      <!-- 招呼语 -->
      <div>
        <div class="text-sm font-medium text-gray-700 mb-2">招呼语</div>
        <div class="bg-white rounded-lg p-3 min-h-[50px]">
          <div class="flex items-start gap-3">
            <!-- 文本内容 -->
            <div 
              class="flex-1 text-sm text-gray-600 line-clamp-2 cursor-help"
              :title="form.greeting || '这里将显示角色的问候语...'"
            >
              {{ form.greeting || '这里将显示角色的问候语...' }}
            </div>
            <!-- 语音播放按钮 -->
            <!-- <button 
              v-if="form.voice"
              @click="handlePlayGreeting"
              class="flex-shrink-0 p-2 rounded-full bg-[#635BFF] text-white hover:bg-[#5a4fcf] transition-colors"
              title="试听语音"
            >
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 4.663 12 5.109 12 6v12c0 .891-1.077 1.337-1.707.707L5.586 15z"></path>
              </svg>
            </button> -->
          </div>
        </div>
      </div>
    </div>
    
    <!-- 头像预览模态框 -->
    <div 
      v-if="showPreview" 
      class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
      @click="hideAvatarPreview"
    >
      <div class="relative max-w-4xl max-h-[90vh] p-4">
        <!-- 关闭按钮 -->
        <button 
          @click="hideAvatarPreview"
          class="absolute -top-2 -right-2 z-10 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-gray-100 transition-colors"
        >
          <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
        
        <!-- 放大的头像 -->
        <div class="bg-white rounded-2xl shadow-2xl overflow-hidden avatar-preview">
          <img 
            v-if="form.avatar" 
            :src="form.avatar" 
            alt="角色头像预览" 
            class="max-w-full max-h-[80vh] object-contain"
          />
          <div v-else class="w-96 h-96 bg-gray-100 flex items-center justify-center">
            <svg class="w-24 h-24 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface CharacterForm {
  name: string
  prompt: string
  greeting: string
  voice: string
  avatar?: string
}

const props = defineProps<{
  form: CharacterForm
}>()

// 头像预览状态
const showPreview = ref(false)

// 显示头像预览
const showAvatarPreview = () => {
  if (props.form.avatar) {
    showPreview.value = true
  }
}

// 隐藏头像预览
const hideAvatarPreview = () => {
  showPreview.value = false
}

// 键盘事件处理
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Escape' && showPreview.value) {
    hideAvatarPreview()
  }
}

// 监听键盘事件
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})

// 播放招呼语
const handlePlayGreeting = () => {
  if (!props.form.voice || !props.form.greeting) {
    alert('请先设置音色和招呼语')
    return
  }
  
  // 这里可以调用语音播放功能
  console.log('播放招呼语:', props.form.greeting, '音色:', props.form.voice)
  // TODO: 实现语音播放逻辑
}
</script>

<style scoped>
/* 文本截断样式 - 限制为2行显示 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em; /* 2行的高度 */
  word-break: break-word;
  word-wrap: break-word;
}

/* 悬浮提示样式 */
.cursor-help:hover {
  background-color: #f9fafb;
}

/* 头像预览模态框动画 */
.avatar-preview-enter-active,
.avatar-preview-leave-active {
  transition: opacity 0.3s ease;
}

.avatar-preview-enter-from,
.avatar-preview-leave-to {
  opacity: 0;
}

/* 头像预览图片样式 */
.avatar-preview img {
  transition: transform 0.3s ease;
}

.avatar-preview img:hover {
  transform: scale(1.02);
}
</style>
